<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view class="pure-input" :class="_classes" :style="_styles">
		<slot name="front">
			<view
				class="pure-input__icon pure-input__icon--front"
				v-if="frontIconName"
			>
				<pure-icon
					:name="frontIconName"
					:mode="$attrs.frontIconMode || $attrs['front-icon-mode']"
				></pure-icon>
			</view>
		</slot>
		<input
			class="pure-input__input"
			:type="$attrs.type"
			:value="modelValue"
			:text-content-type="
				$attrs.textContentType || $attrs['text-content-type']
			"
			:password="$attrs.password"
			:placeholder="$attrs.placeholder"
			:placeholder-style="
				$attrs.placeholderStyle || $attrs['placeholder-style']
			"
			:placeholder-class="
				$attrs.placeholderClass || $attrs['placeholder-class']
			"
			:maxlength="$attrs.maxlength"
			:cursor-spacing="$attrs.cursorSpacing || $attrs['cursor-spacing']"
			:focus="$attrs.focus"
			:confirm-type="$attrs.confirmType || $attrs['confirm-type']"
			:confirm-hold="$attrs.confirmHold || $attrs['confirm-hold']"
			:cursor="$attrs.cursor"
			:cursor-color="$attrs.cursorColor || $attrs['cursor-color']"
			:selection-start="
				$attrs.selectionStart || $attrs['selection-start']
			"
			:selection-end="$attrs.selectionEnd || $attrs['selection-end']"
			:adjust-position="
				$attrs.adjustPosition || $attrs['adjust-position']
			"
			:auto-blur="$attrs.autoBlur || $attrs['auto-blur']"
			:ignoreCompositionEvent="
				$attrs.ignoreCompositionEvent ||
				$attrs['ignore-composition-event']
			"
			:always-embed="$attrs.alwaysEmbed || $attrs['always-embed']"
			:hold-keyboard="$attrs.holdKeyboard || $attrs['hold-keyboard']"
			:safe-password-cert-path="
				$attrs.safePasswordCertPath || $attrs['safe-password-cert-path']
			"
			:safe-password-length="
				$attrs.safePasswordLength || $attrs['safe-password-length']
			"
			:safe-password-time-stamp="
				$attrs.safePasswordTimeStamp ||
				$attrs['safe-password-time-stamp']
			"
			:safe-password-nonce="
				$attrs.safePasswordNonce || $attrs['safe-password-nonce']
			"
			:safe-password-salt="
				$attrs.safePasswordSalt || $attrs['safe-password-salt']
			"
			:safe-password-custom-hash="
				$attrs.safePasswordCustomHash ||
				$attrs['safe-password-custom-hash']
			"
			:random-number="$attrs.randomNumber || $attrs['random-number']"
			:controlled="$attrs.controlled"
			:always-system="$attrs.alwaysSystem || $attrs['always-system']"
			:inputmode="$attrs.inputmode || $attrs['inputmode']"
			@focus="onFocus"
			@input="onInput"
			@blur="onBlur"
			@confirm="onConfirm"
			@keyboardheightchange="onKeyboardheightchange"
		/>
		<view
			class="pure-input__clear"
			v-if="clearable && modelValue?.toString?.()?.length > 0"
		>
			<pure-icon
				:name="clearIconName"
				:mode="$attrs.clearIconMode || $attrs['clear-icon-mode']"
				@tap="handleClear"
			></pure-icon>
		</view>
		<slot name="after">
			<view
				class="pure-input__icon pure-input__icon--after"
				v-if="afterIconName"
			>
				<pure-icon
					:name="afterIconName"
					:mode="$attrs.afterIconMode || $attrs['after-icon-mode']"
				></pure-icon>
			</view>
		</slot>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed, inject, useAttrs } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Attrs
// **************************************************************************************************************
const _attrs = useAttrs();

// **************************************************************************************************************
// * Injects
// **************************************************************************************************************
const PureFormItemOnBlur = inject("PureFormItemOnBlur", null);
const PureFormItemOnChange = inject("PureFormItemOnChange", null);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([
	"input",
	"focus",
	"blur",
	"confirm",
	"keyboardheightchange",
	"update:modelValue",
	"clear",
]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 禁用
	if (_props.disabled) {
		array.push("pure-input--disabled");
	}

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 获取焦点事件
function onFocus(e) {
	_emits("focus", e);
}

// 失去焦点事件
function onBlur(e) {
	_emits("blur", e);
	PureFormItemOnBlur?.();
}

// 输入事件
function onInput(e) {
	const value = formatValue(e.detail.value);
	_emits("update:modelValue", value);
	_emits("input", e);
	if (_props?.modelValue !== e.detail.value) {
		PureFormItemOnChange?.();
	}
}

// 确认事件
function onConfirm(e) {
	_emits("confirm", e);
}

// 键盘高度变化事件
function onKeyboardheightchange(e) {
	_emits("keyboardheightchange", e);
}

// 格式化值
function formatValue(value) {
	// 数字格式
	if (
		_attrs?.type === "number" ||
		_attrs?.type === "decimal" ||
		_attrs?.type === "numeric"
	) {
		value = Number(value);
	}

	return value;
}

// 清空
function handleClear() {
	_emits("update:modelValue", "");
	_emits("clear");
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
